<template>
  <a-form ref="ruleForm" class="form" :colon="false" :model="form" :label-col="{ span: 4 }"
:wrapperCol="{ span: 20 }">
    <a-form-item v-for="item in formJson" :key="item.fieldName"
      :label="item.label"
      :prop="item.fieldName"
      :class="item.extraConfig.className"
      >
        <a-input-number :disabled="item.extraConfig.disabled" v-if="item.type === 'number'"  v-model="form[item.fieldName]" :placeholder="inputPlaceholder" />

        <a-select :disabled="item.extraConfig.disabled" v-else-if="item.type === 'select'"  v-model="form[item.fieldName]" :placeholder="selectPlaceholder" >
          <a-select-option v-for="option in item.options" :key="option.value">
            {{option.label}}
          </a-select-option>
        </a-select>
        <a-input :disabled="item.extraConfig.disabled" v-else-if="item.type === 'input'" v-model="form[item.fieldName]" :placeholder="inputPlaceholder" />
        <a-input :disabled="item.extraConfig.disabled" v-else-if="item.type === 'color'" type="color" v-model="form[item.fieldName]" :placeholder="selectPlaceholder" />
        <a-date-picker :disabled="item.extraConfig.disabled" v-else-if="item.type === 'date'" v-model="form[item.fieldName]" :placeholder="selectPlaceholder" />
        <a-date-picker :disabled="item.extraConfig.disabled" v-else-if="item.type === 'month'" v-model="form[item.fieldName]" :placeholder="selectPlaceholder" />
        <a-date-picker :disabled="item.extraConfig.disabled" v-else-if="item.type === 'range'" v-model="form[item.fieldName]" :placeholder="selectPlaceholder" />
        <a-select :disabled="item.extraConfig.disabled" v-else-if="item.type === 'select-group'"  v-model="form[item.fieldName]" :placeholder="selectPlaceholder" >
          <a-select-opt-group v-for="(option, index) in item.options" :key="index" :label="option.label">
            <a-select-option v-for="optionItem in option.children" :key="optionItem.value">
              {{optionItem.label}}
            </a-select-option>
          </a-select-opt-group>

        </a-select>
        <a-input :disabled="item.extraConfig.disabled" v-else v-model="form[item.fieldName]" :placeholder="inputPlaceholder" />
    </a-form-item>
  </a-form>
</template>


<script>
export default {
  props: {
    form: {
      require: true,
      type: Object,
      default: ()=> {}
    },
    formJson: {
      require: true,
      type: Array,
      default: ()=> []
    }
  },
  data(){
    return {
      inputPlaceholder: "请输入",
      selectPlaceholder: "请选择"
    }
  }
}
</script>
<style lang="less" scoped>
@import url("./index.less");
</style>
